<template>
  <div>
    <el-dialog ref="batchBack" title="批量收回" :visible="popVisible" :close-on-click-modal="false" @close="onCancel">
      <p>将收回以下{{ list.length }}人的派遣</p>

      <el-table :data="list" element-loading-text="加载中" border fit highlight-current-row>
        <el-table-column type="index" min-width="80" label="序号" align="center"></el-table-column>
        <el-table-column
          :label="item.label"
          :show-overflow-tooltip="item.showTips"
          v-for="item in columns"
          :key="item.key"
          :align="item.align || 'center'"
        >
          <template slot-scope="scope">
            <span v-if="item.key === 'gender'">{{ scope.row[item.key] | genderFilter }}</span>
            <span v-else-if="item.key === 'sendTime'">
              {{ scope.row.sendStartTime | timeFilter(item.format) }} ~
              {{ scope.row.sendEndTime | timeFilter(item.format) }}
            </span>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="form-footer" slot="footer">
        <el-button type="primary" class="btn" @click="onSubmit">收回</el-button>
        <el-button type="secondary" class="btn" @click.native.prevent="onCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sendBack } from '@common/api/worker';

import { formatTime } from '@common/utils/time';
import { getColumns } from '@common/utils/worker';
import { GENDER, EDUCATION } from '@common/consts/worker';

export default {
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  filters: {
    genderFilter(gender) {
      // 性别
      return gender ? GENDER.find(v => v.value === gender)?.label || '--' : '--';
    },
    educationFilter(edu) {
      // 学历
      return edu ? EDUCATION.find(v => v.value === edu)?.label || '--' : '--';
    },
    timeFilter(time) {
      if (time) return formatTime(time, { format: 'YYYY-MM-DD' });
      return '--';
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    popVisible() {
      return this.visible;
    },
    columns() {
      return getColumns(['name', 'mobile', 'sendTime', 'tenantName']);
    },
  },

  methods: {
    async onSubmit() {
      const params = {
        List: this.list.map(v => ({ id: v.sendId })),
      };
      const response = await sendBack(params);
      if (response?.code === 20000) {
        this.$emit('batchBackSuccess', true);
        this.$message({
          message: '工人收回成功',
          type: 'success',
        });
      } else {
        this.$message({
          message: '工人收回失败',
          type: 'warning',
        });
        this.$emit('batchBackHide');
      }
    },
    onCancel() {
      this.$emit('batchBackHide');
    },
  },
};
</script>
